import { useState } from "react";
import { Switch, Route, Router, Redirect } from "react-router";
import { createBrowserHistory } from "history";
import { Icon, TabBar, Cell, Button, NavBar } from "zarm";
import Home from "./Home";
import Found from "./Found";
import Mine from "./Mine";

const TabIcon = Icon.createFromIconfont(
  "//at.alicdn.com/t/font_1340918_lpsswvb7yv.js"
);

const history = createBrowserHistory();

const titles = {
  home: "主页",
  found: "发现",
  me: "我的",
};

const Demo = () => {
  const [activeKey, setActiveKey] = useState("home");
  const [visible, setVisible] = useState(true);

  const handleChange = (key) => {
    history.push(`/${key}`);
    setActiveKey(key);
  };
  return (
    <>
      <NavBar
        title={titles[activeKey]}
        right={<Icon type="add" theme="primary" />}
      />
      <Router history={history}>
        <Switch>
          <Route component={Home} path="/home" exact />
          <Route path="/found" component={Found} exact />
          <Route path="/me" component={Mine} exact />
          <Redirect to="/home" />
        </Switch>
      </Router>
      <TabBar visible={visible} activeKey={activeKey} onChange={handleChange}>
        <TabBar.Item
          itemKey="home"
          title="主页"
          icon={<TabIcon type="home" />}
        />
        <TabBar.Item
          itemKey="found"
          title="保险"
          icon={<TabIcon type="insurance" />}
          badge={{ shape: "circle", text: "3" }}
        />
        <TabBar.Item
          itemKey="me"
          title="我的"
          icon={<TabIcon type="user" />}
          badge={{ shape: "dot" }}
        />
      </TabBar>
    </>
  );
};

export default Demo;
